<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    
     <script type="text/javascript">
         $(function () {
            $('#newNav').click(function(){
                    window.location.href="addRole.html";
             });
         });
        function checkall(){
                var alls=document.getElementsByName("check");
                var ch=document.getElementById("checkall");
                if(ch.checked){
                    for(var i=0;i<alls.length;i++){
                        alls[i].checked=true;
                    }
                }else{
                    for(var i=0;i<alls.length;i++){
                        alls[i].checked=false;
                    }
                }
            }
        function delAll(){
			var alls=document.getElementsByName("check");
			var ids=new Array();
			for(var i=0;i<alls.length;i++){
				if(alls[i].checked){
					ids.push(alls[i].value);
				}		
			}
			if(ids.length>0){
				if(confirm("确认删除?")){
                    $.ajax({
                        type:"post",
                        url: "/role/batch/" + ids.toString(),
                        data: "_method=DELETE",
                        dataType:"json",
                        success: function(data){
                            if(data.msg=='success') {
                                alert("删除成功")
                                window.location.href = "index.html";
                            }else{
                                alert("删除失败！");
                            }
                        }
                    })
				}
			}else{
				alert("请选中要删除的项");
			}
		}
    </script>   
    
</head>
<body>
<form class="form-inline definewidth m20" method="get">
    角色名称：
    <input type="text" name="r_name" id="r_name" class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button type="button" onclick="loadData(1)" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>角色名称</th>
        <th>状态</th>
        <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="content">
        <tr>
            <td style="vertical-align:middle;"><input type="checkbox" name="check" value="1"></td>
            <td>管理员</td>
            <td>启用</td>
            <td><a href="editRole.html">编辑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:alert('删除成功！');">删除</a> </td>
        </tr>
    </tbody>
</table>

   <table class="table table-bordered table-hover definewidth m10" >
  	<tr><th colspan="5">
        <div id="pageInfo" class="inline pull-right page">
            <span id="total">0</span> 条记录 <span id="currentIndex">1</span>/<span id="pageNums">107</span> 页  <a onclick="loadData(1)">首页</a> <a href='#'>上一页</a> <span class='current'>1</span><a href='#'>2</a><a href='/chinapost/index.php?m=Label&a=index&p=3'>3</a><a href='#'>4</a><a href='#'>5</a>  <a href='#' >下一页</a> <a href='#' >最后一页</a></div><div><button type="button" class="btn btn-success" id="newNav">添加资源</button>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button></div></th></tr>
   </table>
 </body>

<script>
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }
    $(function () {
        loadData();
    })


    // 编辑数据
    function updateData(id) {
        let pageIndex = $("#currentIndex").html();
        location.href = "editRole.html?id="+id+"&pageIndex="+pageIndex+"&pageSize=5";
    }
    // 删除数据
    function deleteData(id) {
        if(confirm("确认删除?")){
            $.ajax({
                type:"post",
                url: "/role/"+id,
                data: "_method=DELETE",
                dataType:"json",
                success: function(data){
                    if(data.msg=='success') {
                        let pageIndex = $("#currentIndex").html();
                        let pageSize = 5;
                        alert("删除成功")
                        window.location.href = "index.html?pageIndex="+pageIndex+"&pageSize="+pageSize;
                    }else{
                        alert("删除失败！");
                    }
                }
            })
        }
    }
    // 加载数据
    function loadData(pageIndex) {
        let url = document.location.href.toString();
        let pageSize = 5;
        if (pageIndex == undefined){
            pageIndex=url.GetValue("pageIndex");
        }
        if (url.GetValue("pageSize")!=undefined){
            pageSize = url.GetValue("pageSize");
        }
        // 先清空数据
        $("#content").empty();
        // 1. 获得 分页参数 + 模糊查询条件
        let r_name = $("#r_name").val();
        // 判断pageIndex是否传值
        if (pageIndex == undefined){
            pageIndex = $("#currentIndex").html();
        }
        // 封装参数
        let param ={pageIndex :pageIndex,pageSize:pageSize};
        console.log(r_name)
        if (r_name!='') {
            param.r_name = r_name;
            alert(r_name)
        }
        console.log(param)
        // 2. 发送ajax 请求得到数据
        $.getJSON("/role",param,function (data) {
            console.log(data);
            if (data.code == 200){
                // 数据获取成功
                let list = data.data.data
                // list数据渲染
                for (let i = 0; i < list.length; i++) {
                    let item = `<tr>
                                <td style="vertical-align:middle;"><input type="checkbox" name="check" value=`+list[i].r_id+`></td>
                                <td>`+list[i].r_name+`</td>
                                <td>`+(list[i].r_state==0?"有效":"无效")+`</td>
                                <td>
                                    <a onclick="updateData(`+list[i].r_id+`)">编辑</a>&nbsp;&nbsp;&nbsp;<a onclick="deleteData(`+list[i].r_id+`)">删除</a>
                                </td>
                            </tr>`
                    $("#content").append($(item));
                }
                // 分页底部栏 数据渲染
                let pageInfo = data.data;
                /* <span id="total">0</span> 条记录 <span id="currentIndex">1</span>/<span id="pageNums">107</span> 页
                    <a onclick="loadData(1)">首页</a> <a href='#'>上一页</a>
                    <span class='current'>1</span><a href='#'>2</a><a href='/chinapost/index.php?m=Label&a=index&p=3'>3</a><a href='#'>4</a><a href='#'>5</a>
                    <a href='#' >下一页</a>
                    <a href='#' >最后一页</a>*/
                $("#pageInfo").empty();
                // 总条数 + 当前页+ 总页数
                let pageList1 = `<span id="total">`+pageInfo.total+`</span> 条记录 <span id="currentIndex">`+pageInfo.currentIndex+`</span>/<span id="pageNums">`+pageInfo.pageTotal+`</span> 页`
                $("#pageInfo").append($(pageList1));
                // 首页 + 上一页
                let pageList2;
                if (pageInfo.currentIndex != 1){
                    pageList2 = `<a onclick="loadData(1)">首页</a> <a onclick="loadData(`+pageInfo.lastIndex+`)">上一页</a>`
                } else{
                    pageList2 = `<a disabled="true" ">首页</a> <a disabled="true">上一页</a>`
                }
                $("#pageInfo").append($(pageList2));
                // 页数导航条
                let pages = pageInfo.navigatePageNums;
                for (let i = 0; i < pages.length; i++) {
                    let items;
                    if (pages[i] == pageInfo.currentIndex) {
                        items = `<span class='current'>`+pages[i]+`</span>`
                    } else {
                        items = `<a onclick="loadData(`+pages[i]+`)">`+pages[i]+`</a>`
                    }
                    $("#pageInfo").append($(items));
                }
                // 下一页 + 尾页
                let pageList3;
                if(pageInfo.lastPage == pageInfo.currentIndex){
                    pageList3 = `<a disabled="true" ">下一页</a> <a disabled="true">尾页</a>`
                } else {
                    pageList3 = `<a onclick="loadData(`+pageInfo.nextIndex+`)" >下一页</a> <a onclick="loadData(`+pageInfo.lastPage+`)">尾页</a>`
                }
                $("#pageInfo").append($(pageList3));
            }
        })
    }
</script>


</html>